<template>
      <a-drawer
      :width="900"
      title="开票详情"
      placement="right"
      :visible="visible"
      @close="visible=false">
        <a-card title="基础信息" style="margin-bottom:24px">
          <template #extra>
            <label style="margin-right:50px;">已选择 
              <a-tag color="#f50">{{table.loadData.length}}</a-tag>  项</label>
            <label>合计开票金额
              <a-tag color="#f50">{{detail.invoiceAmount}}</a-tag>
              元
            </label>
          </template>
          <a-table 
          :columns="table.columns" 
          rowKey="settleBatchCode"
          :pagination="false"
          size="middle"
          :data-source="table.loadData">
          </a-table>
        </a-card>
        
        <a-card title="开票信息" style="margin-bottom:24px">
            <detail-list :col="2">
                <detail-list-item term="园区名称">{{detail.parkName}}</detail-list-item>
                <detail-list-item term="税率">{{detail.vatRatio}}%</detail-list-item>
                <detail-list-item term="不含税价（元）">¥{{detail.amount}}</detail-list-item>
                <detail-list-item term="税额">¥{{detail.vatTotalAmount}}</detail-list-item>
                <detail-list-item term="发票类型">{{detail.type}}</detail-list-item>
                <detail-list-item term="类目">{{detail.itemName}}</detail-list-item>
                <detail-list-item term="备注">{{detail.remark}}</detail-list-item>
            </detail-list>
        </a-card>

        <a-card title="抬头信息" style="margin-bottom:24px">
            <detail-list :col="2">
                <detail-list-item term="公司名称">{{title.enterpriseName}}</detail-list-item>
                <detail-list-item term="纳税人识别号">{{title.creditCode}}</detail-list-item>
                <detail-list-item term="地址">{{title.address}}</detail-list-item>
                <detail-list-item term="电话">{{title.mobile}}</detail-list-item>
                <detail-list-item term="银行账号">{{title.accountNo}}</detail-list-item>
                <detail-list-item term="开户行">{{title.bankName}}</detail-list-item>
            </detail-list>
        </a-card>

        <a-card title="邮寄信息" style="margin-bottom:24px">
            <detail-list :col="2">
                <detail-list-item term="收件人姓名">{{mails.name}}</detail-list-item>
                <detail-list-item term="收件人电话">{{mails.mobile}}</detail-list-item>
                <detail-list-item term="城市">{{mails.city}}</detail-list-item>
                <detail-list-item term="详细地址">{{mails.address}}</detail-list-item>
            </detail-list>
        </a-card>

        <a-card title="发票信息">
            <detail-list :col="2">
                <detail-list-item term="快递编号">{{detail.expressNo}}</detail-list-item>
                <detail-list-item term="快递公司">{{detail.expressName}}</detail-list-item>
                <detail-list-item term="快递单图片">
                  <viewer :images = "[detail.expressNoUrl]">
                  <img v-if="detail.expressNoUrl" :src="detail.expressNoUrl" style="width: 80px;height:80px;">
                  </viewer>
                </detail-list-item>
            </detail-list>
            <detail-list :col="1" v-if="imgList.length > 0">
                <detail-list-item term="发票图片">
                  <label class="upload-invoice-main" v-for="item in imgList">
                     <viewer :images = "imgList">
                    <img :src="item.url" style="width: 150px;cursor: pointer;">
                    </viewer>
                    <span class="upload-invoice-text">{{item.fileName}}</span>
                  </label>
                </detail-list-item>
            </detail-list>
             <detail-list :col="1" v-if="pdfList.length > 0">
                <detail-list-item term="发票PDF">
                  <label class="invoice-upload" v-for="item in pdfList" @click="privew(item.url)">
                    <img :src="item.urls">
                    <label class="upload-invoice-text">{{item.fileName}}</label>
                  </label>
                </detail-list-item>
            </detail-list>
            <detail-list :col="1" v-if="xlsxList.length > 0">
                <detail-list-item term="发票XLSX">
                  <label class="invoice-upload" v-for="item in xlsxList" @click="privew(item.url)">
                    <img :src="item.urls">
                    <label class="upload-invoice-text">{{item.fileName}}</label>
                  </label>
                </detail-list-item>
            </detail-list>
            <detail-list :col="1" v-if="docList.length > 0">
                <detail-list-item term="发票DOC">
                  <label class="invoice-upload" v-for="item in docList" @click="privew(item.url)">
                    <img :src="item.urls">
                    <label class="upload-invoice-text">{{item.fileName}}</label>
                  </label>
                </detail-list-item>
            </detail-list>
        </a-card>
    </a-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import { CITY_DATA } from '@/store/mutation-types'
import {
    COLUMNS_BATCH,
} from './form'
import { 
  billingDetail
} from '@/api/manage/billing'
import { 
  previewFile
} from '@/utils/util'
import { INVOICE_TYPE_DATA } from '@/config/baseData'
import pdfImg from '@/assets/file_pdf.png'
import docImg from '@/assets/file_doc.png'
import xlsxImg from '@/assets/file_xlsx.png'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'InvoiceDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
        table:{
            columns:COLUMNS_BATCH,
            loadData:[]
        },
        detail:{
            totalAmount:'',
            enterpriseName:'',
            parkName:'',
            vatTotalAmount:'',
            settleTotalAmount:'',
            vatTotalAmount:'',
            amount:'',
            type:'',
            category:'',
            remark:'',
            itemName:'',
            expressNo:'',
            expressName:'',
            expressNoUrl:''
        },
        title:{
            enterpriseName:'',
            creditCode:'',
            address:'',
            mobile:'',
            accountNo:'',
            bankName:'',
        },
        mails:{
            name:'',
            mobile:'',
            city:'',
            address:'',
        },
        pdfList:[],
        xlsxList:[],
        docList:[],
        imgList:[],
        visible:false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    async invoiceDetail(rows){
      const { table,detail,title,mails } = this;
      table.loadData = [];
      for(var keys in detail){
        detail[keys] = '';
      }
      for(var keys in title){
        title[keys] = '';
      }
      for(var keys in mails){
        mails[keys] = '';
      }
      this.pdfList = [];
      this.imgList = [];
      this.xlsxList = [];
      this.docList = [];
      let params = {
        id:rows.id,
        invoiceId:rows.invoiceId
      }
      const {code,data} = await billingDetail(params);
      if(code === '1'){
        this.table.loadData = data.taskSettList;

        let invoice = data.invoiceResDtoList[0];
        Object.assign(invoice,data.invoiceInfo);
        for(var keys in invoice){
          this.detail[keys] = invoice[keys];
        }
        
        this.detail.type = INVOICE_TYPE_DATA.find(v=>v.value == this.detail.type).label;
        if(data.fileResDtoList && data.fileResDtoList.length >=1){
          data.fileResDtoList.forEach(v => {
            let fileIndex= v.url.lastIndexOf(".");
            let _fileType = v.url.substr(fileIndex+1);
            if(_fileType === 'pdf'){
              v.urls = pdfImg
              this.pdfList.push(v)
            }else if(_fileType === 'doc' || _fileType === 'docx'){
               v.urls = docImg
              this.docList.push(v)
            }else if(_fileType === 'xlsx' || _fileType === 'xls'){
               v.urls = xlsxImg
              this.xlsxList.push(v)
            }else{
              this.imgList.push(v)
            }
          });
        }

        //邮寄
        if(data.mailResDtoList && data.mailResDtoList.length >=1){
          var mailRes = data.mailResDtoList[0];
          const province = CITY_DATA.find(v => v.value === mailRes.province);
          const cityObj = province.children.find(v=>v.value === mailRes.city);
          const areaObj = cityObj.children.find(v=>v.value === mailRes.area);
          for(var keys in mailRes){
            this.mails[keys] = mailRes[keys];
          }
          this.mails.city = `${province.label}${cityObj.label}${areaObj.label}`
        }
         //抬头
        if(data.titleList && data.titleList.length >=1){
           var titles = data.titleList[0];
          for(var keys in titles){
            this.title[keys] = titles[keys];
          }
        }
        this.visible = true;

      }
    },
    privew(url){
      previewFile(url);
    }
  }
}
</script>
<style>
  .upload-invoice-main {
    width: 150px;
    position: relative;
    display: inline-block;
    margin: 6px 10px 4px 0;
    cursor: pointer;
}
.upload-invoice-text{
  font-size: 13px;
    line-height: 18px;
    display: block;
    height: 38px;
    overflow: hidden;
}
</style>